<html>
<head>
    <title>用电参数</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }




    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">用量统计</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <dev-tree v-on:click-node="aa"  :tabsign="'zd'"  :energy="energyType" ></dev-tree>
            </el-col>
            <el-col :span="20">
                <div class="main-head">
                    <el-form :inline="true">
                        <el-form-item label="">
                            <el-date-picker :type="dateMod"   v-model="day"  @change="dateChangebirthday"  value-format="yyyy-MM-dd" placeholder="日期" style="width: 150px;"></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-tooltip effect="dark" content="请点击左边树中区域或设备" v-model="tooltip" placement="right">
                            <el-button type="primary" @click="search" style="background: #578BBB">查询</el-button>
                            </el-tooltip>
                        </el-form-item>
                    </el-form>
                </div>

                <el-tabs class="el-tabs_line" v-model="tabName" @tab-click="onTabClick">
                    <el-tab-pane label="日" name="eleDay">
                        <el-table border stripe style="width: 100%" :data="eleITableData">
                            <el-table-column prop="groupName" label="测量点"  align="center">
                            </el-table-column>
                            <el-table-column prop="field04" label="00:00"  align="center">
                            </el-table-column>
                            <el-table-column prop="field05" label="01:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field06" label="02:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field07" label="03:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field08" label="04:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field09" label="05:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field10" label="06:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field11" label="07:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field12" label="08:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field13" label="09:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field14" label="10:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field15" label="11:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field16" label="12:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field17" label="13:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field18" label="14:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field19" label="15:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field20" label="16:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field21" label="17:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field22" label="18:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field23" label="19:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field24" label="20:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field25" label="21:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field26" label="22:00" align="center">
                            </el-table-column>
                            <el-table-column prop="field27" label="23:00" align="center">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="月" name="eleMonth">
                        <el-table border stripe style="width: 100%" :data="eleITableData">
                            <el-table-column prop="groupName" label="测量点"  align="center">
                            </el-table-column>
                            <el-table-column prop="field04" label="01" align="center">
                            </el-table-column>
                            <el-table-column prop="field05" label="02" align="center">
                            </el-table-column>
                            <el-table-column prop="field06" label="03" align="center">
                            </el-table-column>
                            <el-table-column prop="field07" label="04" align="center">
                            </el-table-column>
                            <el-table-column prop="field08" label="05" align="center">
                            </el-table-column>
                            <el-table-column prop="field09" label="06" align="center">
                            </el-table-column>
                            <el-table-column prop="field10" label="07" align="center">
                            </el-table-column>
                            <el-table-column prop="field11" label="08" align="center">
                            </el-table-column>
                            <el-table-column prop="field12" label="09" align="center">
                            </el-table-column>
                            <el-table-column prop="field13" label="10" align="center">
                            </el-table-column>
                            <el-table-column prop="field14" label="11" align="center">
                            </el-table-column>
                            <el-table-column prop="field15" label="12" align="center">
                            </el-table-column>
                            <el-table-column prop="field16" label="13" align="center">
                            </el-table-column>
                            <el-table-column prop="field17" label="14" align="center">
                            </el-table-column>
                            <el-table-column prop="field18" label="15" align="center">
                            </el-table-column>
                            <el-table-column prop="field19" label="16" align="center">
                            </el-table-column>
                            <el-table-column prop="field20" label="17" align="center">
                            </el-table-column>
                            <el-table-column prop="field21" label="18" align="center">
                            </el-table-column>
                            <el-table-column prop="field22" label="19" align="center">
                            </el-table-column>
                            <el-table-column prop="field23" label="20" align="center">
                            </el-table-column>
                            <el-table-column prop="field24" label="21" align="center">
                            </el-table-column>
                            <el-table-column prop="field25" label="22" align="center">
                            </el-table-column>
                            <el-table-column prop="field26" label="23" align="center">
                            </el-table-column>
                            <el-table-column prop="field27" label="24" align="center">
                            </el-table-column>
                            <el-table-column prop="field28" label="25" align="center">
                            </el-table-column>
                            <el-table-column prop="field29" label="26" align="center">
                            </el-table-column>
                            <el-table-column prop="field30" label="27" align="center">
                            </el-table-column>
                            <el-table-column prop="field31" label="28" align="center">
                            </el-table-column>
                            <el-table-column prop="field32" label="29" align="center">
                            </el-table-column>
                            <el-table-column prop="field33" label="30" align="center">
                            </el-table-column>
                            <el-table-column prop="field34" label="31" align="center">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="年" name="eleYear">
                        <el-table border stripe style="width: 100%" :data="eleITableData">
                            <el-table-column prop="groupName" label="测量点" align="center">
                            </el-table-column>
                            <el-table-column prop="field02" label="01" align="center">
                            </el-table-column>
                            <el-table-column prop="field03" label="02" align="center">
                            </el-table-column>
                            <el-table-column prop="field04" label="03" align="center">
                            </el-table-column>
                            <el-table-column prop="field05" label="04" align="center">
                            </el-table-column>
                            <el-table-column prop="field06" label="05" align="center">
                            </el-table-column>
                            <el-table-column prop="field07" label="06" align="center">
                            </el-table-column>
                            <el-table-column prop="field08" label="07" align="center">
                            </el-table-column>
                            <el-table-column prop="field09" label="08" align="center">
                            </el-table-column>
                            <el-table-column prop="field10" label="09" align="center">
                            </el-table-column>
                            <el-table-column prop="field11" label="10" align="center">
                            </el-table-column>
                            <el-table-column prop="field12" label="11" align="center">
                            </el-table-column>
                            <el-table-column prop="field13" label="12" align="center">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>


</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-monitor',
        data:{
            day:'',
            tabName:'eleDay',
            eleITableData:'',
            dateMod:'date',
            expandId:'',
            currentId:'',
            dataId:'',
            energyType:'',
            tooltip:false,
        },
        methods:{
            search:function(){
               this.getEleData();
            },
            aa:function(data){
                this.currentId = data.id;
                this.dataId  = data.dataId;
                this.getEleData();
            },

            dateChangebirthday(val) {
                switch (this.dateMod) {
                    case 'date':
                        this.day = val;
                        break;
                    case 'month':
                     this.day = val.substring(0,7);
                        break;
                    case 'year':
                        this.day = val.substring(0,4);
                        break;
                }
            },
            onTabClick(tab, event){
                switch (tab.name) {
                    case 'eleDay':
                        this.dateMod = 'date';
                        this.day = TimeUtil.convertToString(new Date()).substr(0,10);
                        break;
                    case 'eleMonth':
                        this.dateMod = 'month';
                        this.day = TimeUtil.convertToString(new Date()).substr(0,7);
                        break;
                    case 'eleYear':
                        this.dateMod ='year';
                        this.day = TimeUtil.convertToString(new Date()).substr(0,4);
                        break;
                }
                this.getEleData();
            },
            getEleData(){
                var ids =this.currentId.split('_');
                switch (ids[0]) {
                    case "Z":  //区域
                        var dArr = this.day.split('-');
                        var param={
                            zoneIds:[ids[1]].join(','),
                            zoneType:0,
                            energyType:this.energyType,
                            year:dArr[0]||0,
                            month:dArr[1]||0,
                            day:dArr[2]||0,
                            sumType:0
                        };
                        HttpUtil.get('Analysis/getEnergyUse', param).success((res)=>{
                            this.eleITableData = res.data;
                        });
                        break;
                    case "D":    //设备
                        var dArr = this.day.split('-');
                        var param={
                            zoneIds:[this.dataId].join(','),
                            zoneType:3,
                            energyType:this.energyType,
                            year:dArr[0]||0,
                            month:dArr[1]||0,
                            day:dArr[2]||0,
                            sumType:0
                        };
                        HttpUtil.get('Analysis/getEnergyUse', param).success((res)=>{
                            this.eleITableData = res.data;
                        });
                        break;
                    default:
                        this.eleITableData = '';
                        break;
                }
            }

        },
        created:function(){

            this.day = TimeUtil.convertToString(new Date()).substr(0,10);
            this.energyType =HttpUtil.getQueryString('energyType');
        },
        mounted:function(){
            this.tooltip = true;

        }
    });


</script>

</body>
</html>
